<template>
  <el-form :model="form" label-width="auto" style="max-width: 700px;margin: auto;">
 
     <el-form-item label="姓名:">
       {{ form.userName }}
     </el-form-item>
     
     <el-form-item label="部门:">
        <span v-if="form.departmentId==1">IT信息部</span>
        <span v-if="form.departmentId==2">人力资源部</span>
        <span v-if="form.departmentId==3">财务部</span>
        <span v-if="form.departmentId==4">销售部</span>
        <span v-if="form.departmentId==5">行政部</span>
     </el-form-item>
 
     <el-form-item label="请假类别:">
        <span v-if="form.leaveTypeNumber==1">事假</span>
        <span v-if="form.leaveTypeNumber==2">病假</span>
        <span v-if="form.leaveTypeNumber==3">婚假</span>
        <span v-if="form.leaveTypeNumber==4">丧假</span>
        <span v-if="form.leaveTypeNumber==5">产假</span>
        <span v-if="form.leaveTypeNumber==6">补休</span>
        <span v-if="form.leaveTypeNumber==7">工伤</span>
        <span v-if="form.leaveTypeNumber==8">其他</span> 
     </el-form-item>
 
     <el-form-item label="请假时间:">
 
         <el-date-picker v-model="form.leaveStartTime" type="datetime" placeholder="请假开始时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s" readonly/>&nbsp;&nbsp;
         至&nbsp;&nbsp;
         <el-date-picker v-model="form.leaveEndTime" type="datetime" placeholder="请假结束时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s" readonly /> &nbsp;
 
         共计&nbsp;{{getDate[0]}}&nbsp;天&nbsp;{{getDate[1]}}&nbsp;时  
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         报到时间:&nbsp;&nbsp;<el-date-picker v-model="form.registrationTime" type="datetime" placeholder="请选择报到时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s" readonly/>
     </el-form-item>
 
     <el-form-item label="请假事由">
       {{ form.subjectMatter }}
     </el-form-item>
 
     <el-form-item label="审核:">
      <el-radio-group v-model="form.toExamine">
      <el-radio :value="true">通过</el-radio>
      <el-radio :value="false">不通过</el-radio>
      <el-input placeholder="原因？" style="width: 240px;"></el-input>
    </el-radio-group>
     </el-form-item>
 
     <el-form-item label=" ">
       <el-button type="primary" @click="onSubmit">提交</el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed } from 'vue'
 import axios from 'axios';
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import {useRoute,useRouter} from 'vue-router'
 
 const route = useRoute();
 const router = useRouter();
 
 onMounted(() => {
  BackLeave()
 })
const form: any = reactive({
   leaveId:route.query.leaveId,
   userName: '',
   departmentId: '',
   leaveStartTime: '',
   leaveEndTime:'',
   totalDays: '',
   totalHours: '',
   totalWorkTime: '',
   registrationTime: '',
   subjectMatter: '',
   departmentLeader: '',
   userId: '',
   LeaveType: [],
   leaveTypeNumber:'',
   toExamine:'',
 })
 
 const getDate:any = computed(() => {
   if (!form.leaveStartTime || !form.leaveEndTime) {
     return 0;
   }
 
   const start = new Date(form.leaveStartTime);
   const end = new Date(form.leaveEndTime);
   const diffMs = end.getTime() - start.getTime();
   const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
   const diffHours = Math.floor(diffMs % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
   // console.log(diffDays);
   // console.log(diffHours);
   form.totalDays = diffDays;
   form.totalHours = diffHours;
   return [diffDays,diffHours]
 })
 
 //获取Token字符串中的UserId
 var token:any = localStorage.getItem("Tokens")
 //console.log(token);
 //分割JWT字符串
 const [header, payload, signature] = token.split(".");
 //Base64解码Payload
 const payloadDecoded = atob(payload);
 //解析JSON字符串
 const payloadParsed=JSON.parse(payloadDecoded)
 //提取userId和roleId
 form.userId = payloadParsed.sub;
 const roleId = payloadParsed['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];  
 
 //反填请假信息
const BackLeave = () => {
  let leaveData = {
    leaveId: form.leaveId
  }
  axios.post('/api/LeaveManagement/ReverseLeaveInfo', leaveData).then(res => {
    console.log(res);
    const leaveInfo = res.data.data;
    form.userName = leaveInfo.userName;
    form.departmentId = leaveInfo.departmentId;
    let leaveTypeNumber = leaveInfo.leaveType;

    form.leaveTypeNumber = leaveTypeNumber
    
    form.leaveStartTime = leaveInfo.leaveStartTime;
    form.leaveEndTime = leaveInfo.leaveEndTime;

    form.totalDays = leaveInfo.totalDays;
    form.totalHours = leaveInfo.totalHours;

    form.totalWorkTime = leaveInfo.totalWorkTime;

    form.registrationTime = leaveInfo.registrationTime;
    
    form.subjectMatter = leaveInfo.subjectMatter;
    form.departmentLeader = leaveInfo.departmentLeader;
    let id = leaveInfo.departmentId;
  }).catch(err => {
    console.log(err);

  })
}
 
 //提交申请
 const onSubmit = () => {
   let leaveUpdate = {
    leaveId:form.leaveId,
    toExamine:form.toExamine
   }
   axios.post('/api/LeaveManagement/ToExamineLeaveInfo',leaveUpdate).then(res=>{
     console.log(res);
     if (res.data.code >= 0) {
       ElMessage.success("提交成功!")
       router.push('LeaveList')
     } else {
       ElMessage.error("提交失败!")
       return
     }
   }).catch(err=>{
     console.log(err);
     
   }) 
 }
 
 </script>
 
 <style scoped>
 
 .input-container .el-input__inner,  
 .input-container .el-date-picker__editor .el-input__inner {  
   border-bottom: 2px solid #dcdfe6; /* 自定义下划线样式 */  
   border-top: none;  
   border-left: none;  
   border-right: none;  
   border-radius: 0;  
   padding: 0 10px;  
 }  
   
 .input-container .el-form-item__label {  
   font-weight: bold; /* 可选：加粗标签文本 */  
 }  
 
 </style>